import React from "react";
import { Menu } from "antd";
import IconFont from "../iconfont";
import styles from "./sidebar.less";
const SideBar: React.FC = () => {
  const arrMenu: Array<{
    text: string,
    path?: string,
    iconType?: string,
    disabled?:boolean,
    style?:React.CSSProperties,
  }> = [
      {
        text: '发现音乐',
        path: '/foundmusic'
      }, {
        text: '视频',
        path: '/videos'
      }, {
        text: '朋友',
        path: '/friends'
      }, {
        text: '私人FM',
        path: '/personalFM'
      },{
        text:'我的音乐',
        disabled:true,
        style:{cursor:'auto'}
      },{
        text:'本地音乐',
        iconType:'iconyinyue',
        path:'/localmusic'
      },{
        text:'下载管理',
        iconType:'iconxiazai',
        path:'/localmanager'
      },{
        text:'创建的歌单',
        disabled:true,
        style:{cursor:'auto'}
      },{
        text:'我喜欢的音乐',
        path:'/personalLike'
      }
    ]

  return (
      <Menu
        mode="inline"
        defaultOpenKeys={["sub4"]}
        className={styles['sider-page']}
      >
        {
          arrMenu.map(( item, index: number) => (
            <Menu.Item 
            key={`siderMenu${index}`}
            disabled={item?.disabled}
            style={item?.style}
            icon={item?.iconType && <IconFont type={item.iconType}/>}
            >
              {item?.text || ''}
            </Menu.Item>
          ))
        }
        {
          /*
         
        <Menu.Item key="8" icon={<IconFont type="iconyunpan" />}>
          我的音乐云盘
        </Menu.Item>
        <Menu.Item key="9" icon={<IconFont type="iconxihuan" />}>
          我的收藏
        </Menu.Item>
        <Menu.SubMenu
          key="sub4"
          title="创建的歌单"
        >
          <Menu.Item key="10">我喜欢的音乐</Menu.Item>
          <Menu.Item key="11">随便听听</Menu.Item>
          <Menu.Item key="12">本地音乐</Menu.Item>
        </Menu.SubMenu> 
          
          */
        }
      </Menu>
  );
};
export default SideBar;
